<template>
	<view class="content">
		<top-userinfo ref="topuserinfo" :userusername="userusername" :parentData="false" :useredite="true"></top-userinfo>
		<!-- <view class="my-shop-hd">
			<view class="user-info">
				<uni-list :border="false">
					<uni-list-chat :avatar-circle="true" :title="userusername" avatar="/static/img/img.png" :note="usermobile"
					v-if="useravatar == '' || useravatar == null"></uni-list-chat>
					<uni-list-chat  :title="userusername" :avatar="useravatar" :note="usermobile" v-else></uni-list-chat>
				</uni-list>
				<navigator class="phone-edit" @click="gobindpone"><uni-icons type="compose" size="16"></uni-icons></navigator>
			</view>
			<view class="my-card weui-media-box_appmsg">
				<view class="my-card-icon">
					<uni-icons type="vip" size="30"></uni-icons>
				</view>
				<view class="my-card-info">
					<text>超级抵现卡</text>
				</view>
				<navigator class="instructions" url="/pages/shop/privilege_statement">特权使用说明</navigator>
			</view>
			<uni-popup ref="nameDialog" type="dialog">
				<uni-popup-dialog ref="inputClose"
				mode="input"
				title="编辑姓名"
				v-model="changeusername"
				placeholder="请输入你要编辑的姓名"
				@confirm="dialogInputConfirm">
				</uni-popup-dialog>
			</uni-popup>
		</view> -->
		
			
		
		<uni-list>
			<!-- 2024-10-28要求删掉 先隐藏 -->
			<!-- <uni-list-item title="我的卡包" link showArrow @click="gocardbag" /> -->
			<!-- <uni-list-item /> -->
			
			<!-- <picker class="picker" label="定位城市" @change="changeaddress" @columnchange="addressColumnChange" :value="storageAdd"
			 :range="addressinfo" range-key="name" mode='multiSelector'>
			 <uni-icons type="location" size="18"></uni-icons>
				{{addressvalue == '' ? '请选择地址' : addressvalue}}
			</picker> -->
			<uni-list-item title="关于我们" link @click="goto_about"/>
			<!-- <uni-list-item title="绑定手机" link @click="gobindpone"/> -->
			<uni-list-item title="联系客服" link to="" @click="dialogToggle('info')" />
			<uni-list-item title="用户协议" link to="" @click="goto_agreement" />
			<uni-list-item title="隐私政策" link to="" @click="goto_privacy_policy" />
			<uni-list-item title="退出登录" link to="" @click="exitlogin"/>
		</uni-list>
		<view class="cancellation" @click="log_off">注销账户</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="拨打" title="客服电话" 
			:content="servicephone" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<!-- 提示窗示例 -->
		<uni-popup ref="logoffDialog" type="dialog">
			<uni-popup-dialog :type="msglogoffType" cancelText="取消" confirmText="立即注销"
			 title="提示" content="" @confirm="dialoglogoffConfirm"
				@close="dialoglogoffClose">
				<text>
					为确保您的账户安全，在您提交注销申请前，需同时满足以下条件: <br/>
					
					1.账号注销不是退出登陆，注销后将清空所有数据且不可恢复<br/>
					2.账号财产已清算<br/>
					没有资产，未结算资产和虚拟权益。或您自愿放弃本账号内的资产和虚拟权益<br/>
					3.账号权限解除<br/>
					账号已解除与其他产品的授权登陆或绑定关系<br/>
					4.账号无任何纠纷
				</text>
				
				</uni-popup-dialog>
		</uni-popup>
		
		<!-- <button type="primary" @click="exitlogin" class="fixed-btn">退出登录</button> -->
		
		<!-- ///////////////////// 旧版内容 勿删！！///////////////////// -->
		<!-- <view class="weui-media-box my-shop-hd">
			<view class="weui-media-box_appmsg">
				<view class="weui-media-box__hd">
					<img class="weui-media-box__thumb" src="/static/img/img.png" alt="" v-if="useravatar == '' || useravatar == null" />
					<img class="weui-media-box__thumb" :src="useravatar" alt="" v-else />
				</view>
				<view class="weui-media-box__bd">
					<view class="weui-media-box__title">
						<text class="name">{{userusername}}</text> 
						<navigator class="name-edit" @click="name_edit"><i class="icon-edit-square"></i></navigator>
					</view>
					<text class="phone" @click="openDialog" v-if="usermobile == '' || usermobile == null">
						点击绑定手机号
					</text>
					<text class="phone" v-else>
						{{usermobile}}
						<navigator class="phone-edit" @click="gobindpone"><i class="icon-edit-square"></i></navigator>
					</text>
				</view>
			</view>
			<view class="my-card weui-media-box_appmsg">
				<view class="my-card-icon">
					<uni-icons type="vip" size="30"></uni-icons>
				</view>
				<view class="my-card-info">
					<text class="">我的超级抵现卡</text>
					<text class="weui-cell__desc">兑换金额当钱花</text> 
				</view>
				<navigator class="instructions weui-btn weui-btn_mini">特权使用说明</navigator>
			</view>
			<uni-popup ref="nameDialog" type="dialog">
				<uni-popup-dialog ref="inputClose"
				mode="input"
				title="编辑姓名"
				v-model="changeusername"
				placeholder="请输入你要编辑的姓名"
				@confirm="dialogInputConfirm">
				</uni-popup-dialog>
			</uni-popup>
						
		</view>
		<view class="weui-cells">
			<navigator class="weui-cell" url="my_card_bag">
				<view class="weui-cell__hd"><label class="weui-label">我的卡包</label></view>
				<view class="weui-cell__bd"></view>
				<view class="weui-cell__ft"><i class="icon-right"></i></view>
			</navigator>
			<view class="weui-cell">
				<view class="weui-cell__hd"><label class="weui-label">定位城市</label></view>
				<view class="weui-cell__bd">
					<picker @change="address" @columnchange="addressColumnChange" :value="storageAdd"
					 :range="addressinfo" range-key="name" mode='multiSelector' style="line-height: 86rpx;">
						{{addressvalue == '' ? '请选择地址' : addressvalue}}
					</picker>
				</view>
			</view>
			
		</view> -->
		
		
		
		
		
	</view>
	
	
</template>

<script>
	import {get_service_phone,userlogout,userreload,userlogoff,userget_shop_detail,shopcommongetallprovinces,userset_name,shopcommongetallcity,userchange_city,shopapply} from "@/api/apiinfo";
	import topuserinfo from './../../components/top_userinfo.vue';
	export default {
		components:{
			"top-userinfo":topuserinfo
		},
		data() {
		    return {
		      pickerRange: [], // 存储省市区数据
		      selectedProvince: '请选择', // 当前选择的省份
		      selectedCity: '', // 当前选择的城市
			  
			  addressinfo: [],
			  storageAdd: [0,0],
			  addressvalue:'',
			  postdata:{
			  	province:'',//省份
			  	city:'',//城市
			  	address:'',//店面详细地址
			  },
			  shopnumber:0,
			  usermobile:'',
			  userusername:'',
			  usernickname:'',
			  useravatar:'',
			  
			  changeusername:'',
			  // 店铺筛选
			  value: "",
			  range: [
			    { value: 0, text: "全部" },
			    { value: 1, text: "胖姐烧烤" },
			    { value: 2, text: "瑞幸咖啡" },
			  ],
			  msgType:'',
			  shopinfoarr:{
				  shop:{
					avatar:'',
					exchange_proportion:'',
					lifephoto:[],					
				  },
				  loop_rule:{}
			  },
			  msglogoffType: 'success',
			  shopid:'',
			  userRedata:{},
			  servicephone:null
		    };
		  },
		  // mounted() { ////////////////// uni组件样式重定义
		  
		  // 		var str = document.getElementsByClassName("uni-list-chat__header-image");
		  // 		Array.prototype.forEach.call(str, function(headerImage){
		  // 			headerImage.style.margin = "0";
		  // 		});
				// var str = document.getElementsByClassName("uni-list-chat__content-title");
				// Array.prototype.forEach.call(str, function(contentTitle){
				// 	contentTitle.style.color = "#fff";
				// });
				// var str = document.getElementsByClassName("uni-list-chat__content-note");
				// Array.prototype.forEach.call(str, function(contentNote){
				// 	contentNote.style.color = "#fff";
				// });
				// var str = document.getElementsByClassName("uni-list-item");
				// Array.prototype.forEach.call(str, function(listItem){
				// 	listItem.style.backgroundColor = "transparent";
				// });
				// var str = document.getElementsByClassName("uni-forms-item__label");
				// Array.prototype.forEach.call(str, function(itemLabel){
				// 	itemLabel.style.fontSize = "14px";
				// });
		  // },
		  onShow() {
		  	// console.log('显示onshow:'+localStorage.getItem('shopnumber'))
			// this.shopnumber = localStorage.getItem('shopnumber');
			// this.getuserreload()//重新加载当前登录的用户数据
			
			this.$nextTick(() => {
			    this.$refs.topuserinfo.getuserreload()
			});
			// this.shopid = localStorage.getItem('shopid');
			// this.shopid = 51;//上线后需要删除
			console.log('商户ID：'+this.shopid)
			this.getget_service_phone()  
		  },
		  onLoad() {
		    // this.initPicker();
			this.getshopcommongetallprovinces();
			// {province: 37, city: 84}
			// localStorage.setItem('userToken', 'k29rv2ozQHQJkb4qLEbLCTm087Th5A1lsWCdoMpiqFVeiamh');
			// localStorage.setItem('province', JSON.stringify({
			// 	"id": 37,
			// 	"name": "河北省"
			// }));
			// localStorage.setItem('city', JSON.stringify({
			// 	"id": 84,
			// 	"name": "邯郸市"
			// }));
			// localStorage.setItem('username', '于金鹏'); //上线后需删除
			// localStorage.setItem('mobile', '13295458250');//上线后需删除
			
			this.userusername = uni.getStorageSync('username');
			this.changeusername = uni.getStorageSync('username');
			this.usernickname = uni.getStorageSync('nickname');
			this.useravatar = uni.getStorageSync('avatar');
			this.usermobile = uni.getStorageSync('mobile');
			let provincearr = uni.getStorageSync('province');
			let cityarr = uni.getStorageSync('city');
			if(provincearr != null && provincearr != ''){
				provincearr = JSON.parse(provincearr);
				cityarr = JSON.parse(cityarr);
				console.log(JSON.stringify(provincearr))
				this.storageAdd[0] = provincearr.id;
				this.storageAdd[1] = cityarr.id;
				this.addressvalue = provincearr.name;
				this.addressvalue += ' - '+cityarr.name;
			}
			
			// this.shopnumber = localStorage.getItem('shopnumber');
		  },
		methods: {
			getuserreload(){//重新加载当前登录的用户数据
				userreload().then((res) => {
					console.log("userreload接口返回数据：")
					console.log(JSON.stringify(res));
					// this.userRedata = res.data
					let user_name = res.data.realname//localStorage.getItem('username')
					if(user_name == '' || user_name == null){
						user_name = res.data.nickname//localStorage.getItem('nickname')
					}
					this.userusername = user_name;
				}).catch(err => {
					console.log(JSON.stringify(err))
					if(err.msg){
						uni.showModal({
							title: '提示',
							content: '数据接口报错：'+err.msg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// uni.switchTab({ //内部页面跳转方式 
									// 	url: '/pages/shop/shop'
									// })
								} 
							}
						});
					}
					
				})
			},
			log_off(type){//注销账号
				this.msglogoffType = 'warn'
				this.$refs.logoffDialog.open()
			},
			dialoglogoffConfirm(){//注销账户 立即注销
				let that = this
				uni.showModal({
					title: '提示',
					content: '您确认要注销当前账户吗？',
					success: function(res) {
						if (res.confirm) {
							that.useroutoff()
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})				
			},
			useroutoff(){
				let that = this
				console.log(that.shopid+'确认注销账户。。。')
				userlogoff().then((res) => {
					console.log("userlogoff接口返回数据：")
					console.log(JSON.stringify(res));
					if(res.data == 1){
						uni.removeStorageSync('userToken')
						var getTimestamp=new Date().getTime();
						uni.reLaunch({ //内部页面跳转方式
							url: '/pages/login/login_wc?timestamp='+getTimestamp 
						})
					}
				}).catch(err => {
					console.log(JSON.stringify(err))
					if(err.msg){
						uni.showModal({
							title: '提示',
							content: '数据接口报错：'+err.msg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// uni.switchTab({ //内部页面跳转方式 
									// 	url: '/pages/shop/shop'
									// })
								} 
							}
						});
					}					
				})
			},
			dialoglogoffClose(){ //注销账户取消
				console.log("注销账户 取消")
			},
			dialogConfirm(){
				if(this.servicephone != null || this.servicephone != ''){
					uni.makePhoneCall({
						phoneNumber: this.servicephone
					});
				}
				
			},			
			dialogClose(){ //联系客服 关闭
				
			},
			goto_about(){
				let that = this
				console.log('跳转:')
				uni.navigateTo({
				  url: '/pages/mypage/about'
				});
			},
			goto_agreement(){
				console.log('跳转:')
				uni.navigateTo({
				  url: '/pages/mypage/agreement'
				});
			},
			goto_privacy_policy(){
				console.log('跳转:')
				uni.navigateTo({
				  url: '/pages/mypage/privacy_policy'
				});
			},
			exitlogin(){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认退出吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定'+uni.getStorageSync('shopid'))
							that.loginout()
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},
			loginout(){ //退出登录
				let that = this
				userlogout().then((res) => {
					console.log("userlogout接口返回数据：")
					console.log(JSON.stringify(res));
					if(res.data == 1){
						uni.removeStorageSync('userToken')
						var getTimestamp=new Date().getTime();
						// console.log('/pages/login/login_wc?id='+that.shopid+"&timestamp="+getTimestamp)
						uni.reLaunch({ //内部页面跳转方式
							url: '/pages/login/login_wc?&timestamp='+getTimestamp 
						})
					}
				}).catch(err => {
					console.log(JSON.stringify(err))
					if(err.msg){
						uni.showModal({
							title: '提示',
							content: '数据接口报错：'+err.msg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// uni.switchTab({ //内部页面跳转方式 
									// 	url: '/pages/shop/shop'
									// })
								} 
							}
						});
					}					
				})
			},
			gocardbag(){
				uni.navigateTo({ //底部导航跳转方式
					url: 'my_card_bag'
				});
			},
			gobindpone(){
				var getTimestamp=new Date().getTime();
				uni.navigateTo({ //底部导航跳转方式
					url: '/pages/shop/bind_phone?timestamp='+getTimestamp
				});
			},
			getget_service_phone(){
				get_service_phone().then((res) => {
					console.log("get_service_phone接口返回数据：")
					console.log(JSON.stringify(res));
					this.servicephone = res.data.phone
					
				}).catch(err => {
					console.log(JSON.stringify(err))
					if(err.msg){
						uni.showModal({
							title: '提示',
							content: '数据接口报错：'+err.msg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// uni.switchTab({ //内部页面跳转方式 
									// 	url: '/pages/shop/shop'
									// })
								} 
							}
						});
					}
					
				})
			},
			shopinfo(){
				userget_shop_detail(this.shopid).then((res) => {
					console.log("userget_shop_detail接口返回数据：")
					console.log(JSON.stringify(res));
					this.shopinfoarr = res.data
					
				}).catch(err => {
					console.log(JSON.stringify(err))
					if(err.msg){
						uni.showModal({
							title: '提示',
							content: '数据接口报错：'+err.msg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// uni.switchTab({ //内部页面跳转方式 
									// 	url: '/pages/shop/shop'
									// })
								} 
							}
						});
					}
					
				})
			},
			dialogInputConfirm(){
				if(this.changeusername == '' || this.changeusername == null){
					return false
				}
				let datas = {
					realname:this.changeusername
				}
				userset_name(datas).then((res) => {
					console.log("userset_name接口返回数据：")
					console.log(JSON.stringify(res));
					if(res.code == 1000){
						uni.setStorageSync('username', this.changeusername);
						this.userusername = uni.getStorageSync('username');
					}
					
					uni.showModal({
						title: '提示',
						content: res.message,
						showCancel: false,
						success: function (res) {
							if (res.confirm) {
								
							} 
						}
					});
				}).catch(err => {
					console.log(JSON.stringify(err))
					if(err.msg){
						uni.showModal({
							title: '提示',
							content: '数据接口报错：'+err.msg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// uni.switchTab({ //内部页面跳转方式 
									// 	url: '/pages/shop/shop'
									// })
								} 
							}
						});
					}
					
				})
			},
			// 地区
			changeaddress: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.storageAdd = e.detail.value
				this.addressvalue = this.addressinfo[0][e.detail.value[0]].name
				this.addressvalue += ' - '+this.addressinfo[1][e.detail.value[1]].name
				this.postdata.province = this.addressinfo[0][e.detail.value[0]].id
				this.postdata.city = this.addressinfo[1][e.detail.value[1]].id
				let locationarrProvince = {id:this.addressinfo[0][e.detail.value[0]].id,name:this.addressinfo[0][e.detail.value[0]].name}
				let locationarrcity = {id:this.addressinfo[1][e.detail.value[1]].id,name:this.addressinfo[1][e.detail.value[1]].name}
				let datas = {
					province:this.postdata.province,
					city:this.postdata.city
				}
				console.log(datas)
				userchange_city(datas).then((res) => {
					console.log("userchange_city接口返回数据：")
					console.log(JSON.stringify(res));
					
					uni.setStorageSync('province', JSON.stringify(locationarrProvince));
					uni.setStorageSync('city', JSON.stringify(locationarrcity));
					
					uni.showModal({
						title: '提示',
						content: res.message,
						showCancel: false,
						success: function (res) {
							if (res.confirm) {
								
							} 
						}
					});
				}).catch(err => {
					console.log(JSON.stringify(err))
					if(err.msg){
						uni.showModal({
							title: '提示',
							content: '数据接口报错：'+err.msg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// uni.switchTab({ //内部页面跳转方式 
									// 	url: '/pages/shop/shop'
									// })
								} 
							}
						});
					}
					
				})
			},
			addressColumnChange(e){
				console.log('地区选择变化：')
				console.log(JSON.stringify(e.detail))
				if(e.detail.column == 0){
					console.log(this.addressinfo[0][e.detail.value].name)
					let pid = this.addressinfo[0][e.detail.value].id
					this.getshopcommongetallcity(pid)
				}else{
					console.log(this.addressinfo[1][e.detail.value].name)
				}
			},
			getshopcommongetallprovinces() {//获取省份
				shopcommongetallprovinces().then((res) => {
					console.log("接口返回数据：")
					console.log(JSON.stringify(res));
					this.addressinfo = [res.data,[]]
					if(res.data.length>=1){
						this.getshopcommongetallcity(this.addressinfo[0][0].id)
					}
				}).catch(err => {
					console.log(JSON.stringify(err))
					if(err.msg){
						uni.showModal({
							title: '提示',
							content: '数据接口报错：'+err.msg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// uni.switchTab({ //内部页面跳转方式 
									// 	url: '/pages/shop/shop'
									// })
								} 
							}
						});
					}
					
				})
			},
			getshopcommongetallcity(pid) {//获取城市
				shopcommongetallcity(pid).then((res) => {
					console.log("城市接口返回数据：")
					console.log(JSON.stringify(res));
					this.addressinfo[1] = res.data
					this.$forceUpdate()
				}).catch(err => {
					console.log(JSON.stringify(err))
					if(err.msg){
						uni.showModal({
							title: '提示',
							content: '数据接口报错：'+err.msg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// uni.switchTab({ //内部页面跳转方式 
									// 	url: '/pages/shop/shop'
									// })
								} 
							}
						});
					}
					
				})
			},
			gobindpone(){
				uni.navigateTo({ 
					url: '/pages/shop/bind_phone?type=2'
				});
			},
			openDialog() {
				uni.navigateTo({ //内部页面跳转方式
					url: '/pages/shop/bind_phone'
				})
			  // uni.showModal({
			  //   // title: '提示',
			  //   content: '是否绑定',
			  //   success: function (res) {
			  //     if (res.confirm) {
			  //       console.log('确定');
					// uni.navigateTo({ //内部页面跳转方式
					// 	url: '/pages/shop/bind_phone'
					// })
			  //     } else if (res.cancel) {
			  //       console.log('取消');
			  //     }
			  //   }
			  // });
			},
			//输入对话框 修改名字
			// name_edit() {
			// 	this.$refs.nameDialog.open()
			// },
			//输入对话框 修改手机号
			// phone_edit() {
			// 	this.$refs.phoneDialog.open()
			// },
			// 店铺筛选
			change(e) {
				console.log("e:", e);
			},
						
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},			
						
						
						
			
		}
	};
	
</script>

<style lang="scss">
	.content{
		position: relative;
		// .fixed-btn{
		// 	position: fixed;
		// 	bottom: 120rpx;
		// 	right: 30rpx;
		// 	left: 30rpx;
		// }
		.cancellation{
			margin: 100rpx 30rpx 0;
			font-size: 28rpx;
			text-align: center;
			color: rgba(0, 0, 0, .7);
			display: block;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 20rpx 30rpx;
		}
	}
	.picker{
		line-height: 86rpx;
		padding: 0 30rpx;
		font-size: 28rpx;
		border-bottom: 1px solid #f3f3f3;
		
	}
	page{
		background-color: #f9f9f9;
	}
</style>
